<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #2c3e50;
            font-family: 'Arial', sans-serif;
            color: #ecf0f1;
            text-align: center;
        }

        .djs {
            background-color: #e74c3c;
            padding: 20px 40px;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
            100% {
                transform: scale(1);
            }
        }

        .djs div {
            margin: 15px 0;
            font-size: 28px;
            font-weight: bold;
        }

        .djs span:first-child {
            font-size: 22px;
            font-weight: normal;
            margin-right: 10px;
            color: #ffdd59;
        }

        .djs span:last-child {
            font-size: 48px;
            color: #f1c40f;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
        }

    </style>
</head>
<body>


    <div class="djs">


        <div><span>距离考教资还剩:</span><span id="time">00</span>秒<div>
        <div><span>距离考教资还剩:</span><span id="m">00</span>分钟<div>
        <div><span>距离考教资还剩:</span><span id="h">00</span>小时<div>
        <div><span>距离考教资还剩:</span><span id="day">00</span>天<div>

    </div>

    <script>

        const time = document.querySelector('#time');
        const m = document.querySelector('#m');
        const h = document.querySelector('#h');
        const day = document.querySelector('#day');

        function getJzTime(){


            let jzTime = new Date('2024-9-15')

            let now = new Date();

            let s = Math.round((jzTime.getTime()-now.getTime())/1000);
          

            time.innerHTML = s;
            m.innerHTML = Math.round((jzTime.getTime()-now.getTime())/1000/60);
            h.innerHTML = Math.round((jzTime.getTime()-now.getTime())/1000/60/60);
            day.innerHTML = Math.round((jzTime.getTime()-now.getTime())/1000/60/60/24);

        }

        setInterval(getJzTime,1000)
    </script>
    
</body>
</html>